import React, { memo } from 'react'

import {HYRankingContent} from './style'

export default memo(function HYRankingItem(props) {
    const {info} = props
    const {tracks=[]} = info
    return (
        <HYRankingContent>
            <div className='rank-top'>
                <div>
                    <img className='rank-img' src={info.coverImgUrl} />
                    <a href="/todo"></a>
                </div>
                <div className='list'>
                    <div>{info.name}</div>
                    <span className='player'></span>
                    <span className='loading'></span>
                </div>
            </div>
            <div className="list">
            {
            tracks.slice(0, 10).map((item, index) => {
                return (
                <div key={item.id} className="list-item">
                    <div className="rank">{index + 1}</div>
                    <div className="info">
                        <span className="name text-nowrap">{item.name}</span>
                        <div className="operate">
                            <button className="btn sprite_02 play" ></button>
                            <button className="btn sprite_icon2 addto"></button>
                            <button className="btn sprite_02 favor"></button>
                        </div>
                    </div>
                </div>
                )
            })
                }
            </div>
            <div className="footer">
                <a href="/todo">查看全部 &gt;</a>
            </div>
        </HYRankingContent>
    )
})
